$rt-color-default: #fff;
$rt-color-info: #3498db;
$rt-color-success: #6db33f;
$rt-color-warning: #e8ba00;
$rt-color-error: #e74c3c;
$rt-toast-width: 400px;

@import '../../node_modules/react-toastify/scss/variables';

@import '../../node_modules/react-toastify/scss/toastContainer';
@import '../../node_modules/react-toastify/scss/toast';
@import '../../node_modules/react-toastify/scss/closeButton';
@import '../../node_modules/react-toastify/scss/progressBar';

@import '../../node_modules/react-toastify/scss/animations/bounce.scss';
@import '../../node_modules/react-toastify/scss/animations/zoom.scss';
@import '../../node_modules/react-toastify/scss/animations/flip.scss';
@import '../../node_modules/react-toastify/scss/animations/slide.scss';

.#{$rt-namespace}__toast-container {
  line-height: 22px;
}

.#{$rt-namespace}__toast {
  padding: $spring-8points * 2;
}

.Toastify__toast {
  position: relative;
  min-height: 32px;
  padding: 12px;
  .toast-close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 8px;
    height: 28px;
    cursor: pointer;
    opacity: 0;
    color: white;
    svg {
      width: 14px;
    }
  }
  &:hover {
    .toast-close {
      opacity: 0.6;
    }
  }
}
